
<template >
  <div class="bottom">
     <!--整个左边-->
    <div class="left">
      <div class="left1">
        <h1 style="color: rgb(73, 152, 212);font-family: '宋体', SimSun, sans-serif; font-style: italic;">杜甫</h1>
        <br>
        <h2 style="color: rgb(73, 152, 212);font-family: '宋体', SimSun, sans-serif;">————情系苍生的诗坛巨匠</h2>
        <br>
        <p style="font-size:18px;color: rgb(143, 204, 212); line-height: 1.6;letter-spacing: 2px;text-indent: 2em;font-family: '宋体', SimSun, sans-serif;">杜甫善于运用各种诗歌形式，尤长于律诗，风格多样，而以沉郁为主；语言精练，具有高度的表达能力。继承和发展《诗经》以来注重反映社会现实的优良文学传统，成为中国古代诗歌艺术发展的又一高峰，被后人公认为诗歌史上的“集大成者”。</p>
      </div>
      <div class="left2">
        <h3 class="biaoti" style="width: 43%;">杜甫诗歌数量分布图</h3>
        <leftcenter ></leftcenter>
      </div>
      <div class="left3">
        <h3 class="biaoti" style="width: 15%;">词云图</h3>
        <lefttop></lefttop>
      </div>
    </div>

    <!--整个中间-->
    <div class="center">
      <div class="center1">
        <h3 class="biaoti" style="width: 33%;">杜甫诗词地理分布图</h3>
        <centertop></centertop>
      </div>
      <div class="center2">
        <h3 class="biaoti" style="width: 18%;">杜甫的一生</h3>
        <!-- <div class="yisheng">
           <p class="wenzi">早年生活（712-744）：杜甫出生于河南洛阳一个官宦家庭。他自幼好学，博览群书，年轻时曾游历四方，增长见识;</p>
           <p class="wenzi">求官时期（744-755）：杜甫在这一时期多次参加科举考试，但未能中举。期间，他结识了许多文人雅士，包括李白;</p>
           <p class="wenzi">安史之乱（755-763）：安史之乱爆发后，杜甫经历了颠沛流离的生活。他亲眼目睹了战争的惨状和人民的苦难，这些经历深刻影响了他的诗歌创作，许多著名的诗篇如《春望》、《三吏》和《三别》都是这一时期的作品;</p>
           <p class="wenzi">成都草堂时期（762-765）：杜甫在成都郊外建了草堂，生活相对安定，创作了大量诗歌;</p>
           <p class="wenzi">晚年漂泊（765-770）：由于战乱和家庭原因，杜甫晚年生活并不稳定，他四处漂泊，最终在湖南长沙一带去世。</p>
        </div> -->
        <div class="yisheng">
          <p class="period-title">早年生活（712-744）</p>
          <p class="wenzi">杜甫出生于河南洛阳一个官宦家庭。他自幼好学，博览群书，年轻时曾游历四方，增长见识;</p>
          <p class="period-title">求官时期（744-755）</p>
          <p class="wenzi">杜甫在这一时期多次参加科举考试，但未能中举。期间，他结识了许多文人雅士，包括李白;</p>
          <p class="period-title">安史之乱（755-763）</p>
          <p class="wenzi">安史之乱爆发后，杜甫经历了颠沛流离的生活。他亲眼目睹了战争的惨状和人民的苦难，这些经历深刻影响了他的诗歌创作，许多著名的诗篇如《春望》、《三吏》和《三别》都是这一时期的作品;</p>
          <p class="period-title">成都草堂时期（762-765）</p>
          <p class="wenzi">杜甫在成都郊外建了草堂，生活相对安定，创作了大量诗歌;</p>
          <p class="period-title">晚年漂泊（765-770）</p>
          <p class="wenzi">由于战乱和家庭原因，杜甫晚年生活并不稳定，他四处漂泊，最终在湖南长沙一带去世。</p>
        </div>

        
      </div>
    </div>

   <!--整个右边-->
    <div class="right">
      <div class="right1">
        <righttop></righttop>
      </div>
      <div class="right2">
        <h3 class="biaoti" style="width: 22%;">情感分析图</h3>
        <rightcenter></rightcenter>
        <!-- <leftbottom></leftbottom> -->
      </div>
      <div class="right3">
          <h3 class="biaoti" style="width: 38%;">诗词年度创作趋势图</h3>
        <rightbottom></rightbottom>
      </div>
    </div>
  </div>
</template>

<script>
import leftbottom from "@/components/one/EmotionCharts.vue";
import centerbottom from "@/components/one/CenterBottom.vue";
import righttop from "@/components/one/RightTop.vue";
import rightcenter from "@/components/one/RightCenter.vue";
import lefttop from "@/components/one/WordCloud.vue";
import rightbottom from "@/components/one/RightBottom.vue";
import centertop from "@/components/one/ChinaMap.vue";
import leftcenter from "@/components/one/LeftCenter.vue";

export default {
  name: "First",
  components: {
    lefttop,
    leftbottom,
    centertop,
    centerbottom,
   righttop,
    rightbottom,
    rightcenter,
    leftcenter,
  },
};
</script>

<style scoped>
.bottom {
  width: 100%;
  /* height: 92%; */
  /* flex-grow: 1; */
  flex-direction: row;
  display: flex;
  background-image: url(../assets/背景图.png);
  border-style: solid;
  border-color: #ffffff67;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  height: 150%;
}

.left{
   height: 100%;
   /* flex-grow:1.5; */
   display: flex;
   flex-direction: column;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 1%;
   width: 30%;
}
.center{
   width: 38%;
   /* flex-grow:2; */
   display: flex;
   flex-direction: column;
   margin-right: 1%;
   margin-bottom: 1%;
   /* background-color: aquamarine; */

 
}
.right{
  width: 32%;
  /* flex-grow: 1.5; */
  display: flex;
  flex-direction: column;
   margin-right: 1%;
  margin-bottom: 1%;

}

.left1{
  width:100%;
  /* flex-grow: 1; */
 height: 22.5%;
 margin-top: 1.5%;
 margin-bottom: 1%;
 

}
.left2{
  width:100%;
  /* flex-grow: 3; */
 /* flex-grow:1; */
 height: 40%;
 /* background-color: bisque; */
 margin-top: 1.5%;
 margin-bottom: 1%;

}
.left3{
  width:100%;
  /* flex-grow: 3;
   height: 40%; */
 flex-grow:1; 
 margin-top: 4%;
}

.center1{
  margin-top:3% ;
  height: 40%;
}
.center2{
  margin-top: 8%;
  height: 25%;
  flex-grow: 1;

}
.right1{
 margin-top: 3%;
 height: 17%;
 margin-bottom: 5%;
 

}
.right2{
 height: 35%;
 /* background-color: bisque; */
 margin-top:5%
}
.right3{
 flex-grow:1;
}

.yisheng{
  margin-top: 4%;
  width: 98%;
  height: 85%;
  margin-left: 2%;
  border: 5px solid rgba(144, 161, 211, 0.1);
}
.wenzi {
  margin-top: 1%;
  font-size: 18px;
  color: black;
  letter-spacing: 2.5px;
  line-height: 1.5;
  text-indent: 2em;
  font-family: '宋体', SimSun, sans-serif;
  margin-left: 3%;
  margin-right: 0.8%;
}

.period-title {
  font-size: 20px;
  font-weight: bold; /* 设置文字加粗 */
  letter-spacing: 2.5px;
  line-height: 1.5;
  text-indent: 0;
  font-family: '宋体', SimSun, sans-serif;
  font-weight: bold;
  color: rgb(52, 159, 175);
  margin-top: 1.5%;
  margin-left: 3%;
}
.biaoti{
  border-top: 3px solid rgb(191, 187, 187); /* 设置上边框为1像素宽的实线，颜色为黑色 */
  margin-left: 2%;
  margin-top:1.2% ;
  margin-bottom: 1.2%;
  color: white;
  font-family: '宋体', SimSun, sans-serif; 
  font-style: italic;
  background-color: rgb(144, 183, 217);
}


/* .left {
  width: 33.333%;
  display: flex;
  flex-direction: column;
}

.center {
  width: 33.333%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.right {
  width: 33.333%;
  display: flex;
  flex-direction: column;
} */

/* .s1 {
  margin-top: 12%;
  width: 100%;
  height: 44%;
 
}

.x1 {
  flex-grow: 1;
  
}

.s2 {
  width: 100%;
  height: 55%;

}

.x2 {
  flex-grow: 1;
 
}

.s3 {
  width: 100%;
  height: 50%;

}

.x3 {
  flex-grow: 1;
  width: 100%;
  height: 50%;

} */
</style>
